import React from 'react';
import './index.scss';
import * as basicScroll from 'basicscroll';
import { Row, Col } from 'antd';

class index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    componentDidMount() {
        document.querySelectorAll('.scene').forEach((elem) => {

            const modifier = elem.getAttribute('data-modifier')

            basicScroll.create({
                elem: elem,
                from: 0,
                to: 519,
                direct: true,
                props: {
                    '--translateY': {
                        from: '0',
                        to: `${10 * modifier}px`
                    }
                }
            }).start()

        })
    }

    showDownFun() {
        // 平滑滚动
        window.scrollTo({
            top: 800,
            behavior: "smooth"
        });

    }
    render() {
        const imgList = [
            {
                dataModifier: 0,
                src: require('../../assets/img/banner/p0.png')
            },
            {
                dataModifier: 18,
                src: require('../../assets/img/banner/p1.png')
            },
            {
                dataModifier: 12,
                src: require('../../assets/img/banner/p2.png')
            },
            {
                dataModifier: 8,
                src: require('../../assets/img/banner/p3.png')
            },
            {
                dataModifier: 6,
                src: require('../../assets/img/banner/p4.png')
            },
            {
                dataModifier: 0,
                src: require('../../assets/img/banner/p6.png')
            }
        ]
        return (
            <div className="blogBanner"
            >
                <div style={{
                    width: '100%',
                    position: "absolute",
                    top: "30rem",
                    zIndex: 100,
                    textAlign: 'center'
                }}>
                    <Row>
                        <Col xs={0} sm={0} md={0} lg={0} xl={5}></Col>
                        <Col xs={0} sm={0} md={0} lg={0} xl={14}>
                            {/* 标题 */}
                            <div>
                                <span className="banner-title">H-blog</span>
                            </div>
                            <br />
                            <br />
                            <br />
                            {/* 下滑按钮 */}
                            <div className="show-down" onClick={() => { this.showDownFun() }}>
                                <svg t="1595250606925" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1171" width="32" height="32"><path d="M946.986 372.374L558.08 797.651a61.202 61.202 0 0 1-45.972 20.801 61.202 61.202 0 0 1-45.976-20.801L77.226 372.374c-18.985-20.052-24.852-49.279-15.04-75.093s33.493-43.84 61.014-46.292h777.494c27.627 2.347 51.412 20.265 61.226 46.187 9.92 25.92 4.054 55.038-14.934 75.198z" p-id="1172" fill="#1296db"></path></svg>
                            </div>
                        </Col>
                        <Col xs={0} sm={0} md={0} lg={0} xl={5}></Col>
                    </Row>
                </div>
                {
                    imgList.map((item, index) =>
                        <img className="scene" alt='' key={index} data-modifier={item.dataModifier} src={item.src} />
                    )
                }
            </div>
        )
    }
};
export default index;